<template>
	<view>
		<view class="box-slideLeft">
			<view class="touch-item touch-slideLeft" :style="item_show.txt_style" @touchstart="touchS"
				@touchmove="touchM" @touchend="touchE">
				<slot></slot>
			</view>
			<view class="touch-item del-box" @click="delItem(item_show)">
				<text class="del-box-text">删除</text>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: "delSlideLeft",
		data() {
			return {

			};
		},
		methods: {
			//点击删除按钮事件
			delItem: function(e) {
				let that = this;
				let data = {
					item: e,
					data: that.data_transit,
				};
				this.$emit('delItem', data);
			},
			touchS: function(e) {
				let that = this;

				if (e.touches.length == 1) {
					//设置触摸起始点水平方向位置
					this.startX = e.touches[0].clientX

				}
			},
			touchM: function(e) {
				let that = this;

				if (e.touches.length == 1) {
					//手指移动时水平方向位置
					var moveX = e.touches[0].clientX;
					//手指起始点位置与移动期间的差值
					var disX = this.startX - moveX;
					var delBtnWidth = this.delBtnWidth;
					var txtStyle = "";
					if (disX == 0 || disX < 0) { //如果移动距离小于等于0，说明向右滑动，文本层位置不变
						txtStyle = "left:0px";
					} else if (disX > 0) { //移动距离大于0，文本层left值等于手指移动距离
						txtStyle = "left:-" + disX + "px";
						if (disX >= delBtnWidth) {
							//控制手指移动距离最大值为删除按钮的宽度
							txtStyle = "left:-" + delBtnWidth + "px";
						}
					}
					//获取手指触摸的是哪一项

					that.item_show.txtStyle = txtStyle;

				}
			},
			touchE: function(e) {
				let that = this;
				if (e.changedTouches.length == 1) {
					//手指移动结束后水平位置
					var endX = e.changedTouches[0].clientX;
					//触摸开始与结束，手指移动的距离
					var disX = this.startX - endX;
					var delBtnWidth = this.delBtnWidth;
					//如果距离小于删除按钮的1/2，不显示删除按钮
					var txtStyle = disX > delBtnWidth / 2 ? "left:-" + delBtnWidth + "px" : "left:0px";
					//获取手指触摸的是哪一项
					that.item_show.txtStyle = txtStyle;
				}
			},
		}
	}
</script>

<style lang="scss">
	.box-slideLeft {
		view {
			box-sizing: border-box;
		}

		position: relative;
		overflow: hidden;

		.touch-item {
			position: absolute;
			left: 0;
			overflow: hidden;
			font-size: 16px;
		}

		.touch-slideLeft {
			transition: all 0.2s ease-in-out;
			white-space: nowrap;
			overflow: hidden;
			text-overflow: ellipsis;
		}

		.del-box {
			right: 0;
			float: left;
			width: 70px;
			height: 100%;
			line-height: 100%;
			background-color: #fc5531;
			color: #FFFFFF;
			display: flex;
			align-items: center;
			justify-content: center;

			.del-box-text {
				font-size: 20px;
			}
		}
	}
</style>
